<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='viewport-fit=cover'>

    <script src="${ctx}/resource/webrtc/SignalWebsocket.js"></script>
    <script src="${ctx}/resource/webrtc/WebRtcClient.js"></script>
    <script src="${ctx}/resource/webrtc/ImSingleton.js"></script>
    <script src="${ctx}/resource/webrtc/LocalSeqCreator.js"></script>
    <script src="${ctx}/resource/webrtc/Dto.js"></script>
    <script src="${ctx}/resource/webrtc/Objects.js"></script>
    <script src="${ctx}/resource/webrtc/SignalService.js"></script>
    <script src="${ctx}/resource/webrtc/RpcSignalService.js"></script>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            width: '100%';
            height: '100%';
        }
    </style>

    <script type="text/javascript">
        let webRtcClient = null;
        window.addEventListener('beforeunload', function (event) {
            if (webRtcClient !== null) {
                webRtcClient.exitRoom().then((e)=>{});
            }
        });
        window.onload = async function() {
            let video = document.getElementById("video");
            video.style.transform = 'rotate(90deg)'
            webRtcClient = new WebRtcClient('张飞', 'EBAEFEC729AD3CCB426B79412D39B7051103C291', '0002', "ws://192.168.1.6:9890/signal", false, video, 'remoteContainer');
            await webRtcClient.start();
            console.info("webRtcClient", webRtcClient.userId, webRtcClient.websocketUrl);

            let session = ImSingleton.getInstance().session;
            console.info('session', session);
            session.putData('userId', 'demo');
            let dd = ImSingleton.getInstance().session.getData('userId');
            console.info("userId", dd);

            document.getElementById("startButton").onclick = startMedia;
            // startMedia();
        }

        function startMedia(){
            // fullScreen();
            var constraints = {
                video: true,
                audio: true
            };
            // 获取video摄像头区域
            var video = document.getElementById("video");
            video.style.transform = 'rotate(90deg)'
            // 返回的Promise对象
            var promise = navigator.mediaDevices.getUserMedia(constraints);
            // then()异步，调用MediaStream对象作为参数
            promise.then(function (mediaStream) {
                video.srcObject = mediaStream;
                <!--        video.play();-->

                <!--        mediaStream.onaddtrack = function() {-->
                <!--            let videoPane = document.getElementById("video-pane");-->
                <!--            videoPane.style.visibility = 'visible';-->
                <!--        }-->

                video.play();
            });
        }

        function fullScreen() {
            var video = document.getElementById('video');
            console.info("fullScreen11111111");
            if (video.webkitSupportsFullscreen) {
                video.webkitEnterFullscreen();
                console.info("fullScreen222222222222222222222");
            }

            // 检查浏览器是否支持全屏API
            if (video.requestFullscreen) {
                // 使用原生的方法进入全屏
                video.requestFullscreen().catch(err => {
                    console.error(err);
                });
            } else if (video.mozRequestFullScreen) { /* Firefox */
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                video.msRequestFullscreen();
            }
        }

        function cancelFullScreen() {
            if (document.webkitFullscreenElement) {
                document.webkitCancelFullScreen();
            }
        }

        // 获取远程视频的宽度和高度
        function getRemoteVideoSize() {
            var remoteVideo = document.getElementById('video');
            var width = remoteVideo.videoWidth;
            var height = remoteVideo.videoHeight;
            var sid = document.getElementById("sid");
            sid.innerHTML = width + "," + height;
        }

        async function createRoom() {
            await webRtcClient.createRoom();
        }

        async function jsTest() {
            let t = await '111';
            Promise.reject('eeeeeeeeeeeeeeeeeeeeee');
        }
    </script>
</head>
<body>
    <div id="remoteContainer">
        <video id="video" width="200" height="auto" autoplay="autoplay" controls></video>
    </div>

    <input id="startButton" type="button" title="HTML5摄像头" value="开启摄像头" "/>
    <input type="button" value="createRoom" onclick="createRoom()"/>
    <input type="button" value="js test" onclick="jsTest()"/>
    <span id="sid"></span>
    <div id="remoteContainer"/>
    </body>
</html>